<template>
    <!--日期选择窗口 -->
    <view
        class="item-info"
        :class="openShow === 0 ? 'none' : openShow === 1 ? 'show' : ''"
    >
        <view class="flow-c">
            <view class="s-t-box">
                <view
                    class="txt"
                    @click="onClickTxt(0)"
                    :class="flag == 0 ? 's-txt' : ''"
                    >{{ "开始于 " }}{{ startTimeStr }}</view
                >
                <view
                    class="txt"
                    @click="onClickTxt(1)"
                    :class="flag == 1 ? 's-txt' : ''"
                    >{{ "结束于 " }}{{ endTimeStr }}</view
                >
            </view>
            <datePicker ref="datePicker" @changeTime="onTimeChange">
            </datePicker>
            <view class="btn">
                <view class="comm-btn c-btn" @click="close">取 消</view>
                <view class="comm-btn s-btn" @click="submit">确 定</view>
            </view>
        </view>
    </view>
</template>

<script>
import lang from "../../js/conf/Lang.js";
import https from "../../js/https/Https.js";
import datePicker from "./dateTimePicker.vue";
export default {
    components: { datePicker },
    data() {
        return {
            openShow: 0,
            timeValue: "",
            startTimeStr: "",
            startTimeVal: "",
            endTimeStr: "",
            endTimeVal: "",
            flag: 0,
        };
    },
    methods: {
        /**显示***/
        show(type, data) {
            let timer = type === "show" ? 10 : 200;
            let state = type === "show" ? 1 : 0;
            this.openShow = 2;
            setTimeout(() => {
                this.openShow = state;
            }, timer);
            if (!type) return;
            this.$refs.datePicker.setData();
        },

        onClickTxt(flag) {
            this.flag = flag;
            if (flag == 0) {
                let arr = String(this.startTimeVal).split("-");
                this.$refs.datePicker.setTime(arr[0], arr[1], arr[2]);
            } else {
                let arr = String(this.endTimeVal).split("-");
                this.$refs.datePicker.setTime(arr[0], arr[1], arr[2]);
            }
        },
        //时间选择变更
        onTimeChange(str) {
            console.log("str", str);
            let arr = String(str).split(" ");
            if (arr) {
                let ary = String(arr[0]).split("-");
                let s = ary[0] + "年" + ary[1] + "月" + ary[2] + "日";
                if (this.flag == 0) {
                    this.startTimeStr = s;
                    if (this.endTimeStr == "") {
                        this.endTimeStr = s;
                        this.endTimeVal = arr[0];
                    }
                    this.startTimeVal = arr[0];
                } else {
                    this.endTimeStr = s;
                    this.endTimeVal = arr[0];
                }
            }
        },

        /*******更新未付款*****/
        submit() {
            const st = new Date(this.startTimeVal).getTime();
            const et = new Date(this.endTimeVal).getTime();
            if (st > et) {
                this.$msg({ title: "开始时间不能大于结束时间" });
            } else {
                this.$emit("selectDate", this.startTimeVal, this.endTimeVal);
                this.show();
            }
        },

        /*****关闭****/
        close() {
            this.$emit("closeDate");
            this.show();
        },
    },
};
</script>
<style lang="scss">
.flow-c {
    height: 277px;
    width: 500px;
    background-color: #fff;
    border-radius: 6px;
    overflow: hidden;
    .s-t-box {
        display: flex;
        align-items: center;
        padding: 16px;
        justify-content: space-between;
        .txt {
            width: 50%;
            text-align: center;
            font-size: 14px;
            cursor: pointer;
        }
        .s-txt {
            color: #3388ff;
        }
    }

    .btn {
        width: 100%;
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: center;

        font-size: 16px;
        z-index: 999;
        cursor: pointer;
        .comm-btn {
            width: 50%;
            height: 50px;
            line-height: 50px;
            text-align: center;
        }
        .c-btn {
            color: #333;
            background: #f5f5f5;
        }
        .c-btn:hover {
            background: #f0f0f0;
        }
        .s-btn {
            color: #fff;
            background: #3388ff;
        }
        .s-btn:hover {
            background: #2d79e3;
        }
    }

    // .btn:hover
    // {
    // 	background: #2d79e3;
    // }
}
</style>